<!-- reｆ:　C:/Users/admin/Documents/HBuilderProjects/official_uniapp/pages/component/input/input.nvue -->

<template>
	<view>
		<!-- 选择框 -->
		<view class='picker_view'>
			<!-- 文本 -->
			<view class='picker_text'>
				<text>{{dc.text}}</text>
			</view>
			
			<!-- 普通输入框 -->
			<view class="picker_input">
				<input :maxlength="dc.maxlength||18" 
				:placeholder="dc.placeholder" 
				:type="dc.type" 
				:value="dc.value"
				@oninput="oninput"
				@input="getInput" />
			</view>
			<text v-if='dc.unit && dc.value' class='picker_unit'>({{dc.unit}})</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bdinput",
		props: ['dc'],
		data() {
			return {
				value: "",
			};
		},
		watch:{
			},
		methods:{
			
			retMsg () {
				var res = {
					'value': this.value,
					'dc': this.dc,
				}
				this.$emit('retMsg', res);
			},
			getInput (e) {
				var range = this.dc['range'];
				var value = e.detail.value;
				
				if(this.dc.type == 'number'){
					value = Number(value);
					if(range && value){
						// console.log('~~~~~~~', range, value);
						if(value < range[0])
							value = range[0]
						else if(value > range[1]){
							value = range[1]
						}
					}
				}
				
				this.value = value;
				// console.log('=== bdinput', value);
			    this.retMsg();
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 选择框
	.picker_view {
		width: 100%;
		display: flex;
		margin: auto;
		border-top: 3upx solid #ccc;
		border-bottom: 3upx solid #ccc;
		padding: 20upx;
	}
	.picker_text {
		width: 25%;
	}
	.picker_select {
		width: 100%;
	}
	// .picker_input {
	// 	display: flex;
	// }
	
	.picker_unit {
		float: left;
		// width: 45%;
	}
</style>
